import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table,  DatePicker, Select,Modal ,Upload ,Icon ,message } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import ShowBigImg from '../../components/showBigImg'
import {VuserReg,Vattestation,Vdelete,Vblank,masterInfo} from 'actions/userConter'
import '../../style/userControl.less'
import ModalAddMaster from './addMasterModal.js';

const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      ModalFlg:false,//弹窗状态
      addModalFlg:false,//添加大咖弹窗
      modalList:"",//列表内容详情
      userList:"",
      showBigImgModal:false,//查看大图的弹窗
      imgArry:[],//图片数组
      imgIndex:"",//图片下标
    }
    this.keyword={"realName":"","mobile":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数

  }
  componentDidMount() {
    this.selectList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "realName":this.props.form.getFieldValue('realName'),
      "mobile":this.props.form.getFieldValue('mobile'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(VuserReg(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }

  addList(type,id){//添加大咖信息弹窗开启
    if(type == 1){
      //新增
      this.setState({
        addModalFlg: true,
        modalList:{},
        addModalType:type
      })
    }else{
      this.props.dispatch(masterInfo({"accountId":id},
      (respose) => {
          this.setState({
          addModalFlg: true,
          modalList:respose,
          addModalType:type,
        })
      }))
    }
    
  }
  
  addListCancel(){
    this.setState({
      addModalFlg: false,
    })
  }

  addSubmit(){//添加大咖提交
    //调用接口 然后关闭弹窗
    this.addListCancel();
  }

  deleteV(bigShotId,cvId){//删除大咖操作
    Modal.confirm({
      title: '确定要删除么？',
      onOk:()=>{
        this.props.dispatch(Vdelete({"bigShotId":bigShotId},(respose) => {
          var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
          if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
            this.currentNumber = this.currentNumber - 1;
          }
          message.success(respose.respMsg);
          this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{

      },
    })
  }

  blankV(bigShotId,cvId){//拉黑大咖操作
    Modal.confirm({
      title: '确定要加入黑名单么？',
      onOk:()=>{
        this.props.dispatch(Vblank({"bigShotId":bigShotId},(respose) => {
          var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
          if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
            this.currentNumber = this.currentNumber - 1;
          }
          message.success(respose.respMsg);
          this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{

      },
    })
  }

  selectInfo(id){//查询用户详细信息
    //根据ID查询单条数据
    this.props.dispatch(masterInfo({"accountId":id,},(respose) => {
      this.setState({
        ModalFlg: true,
        userList: respose,
      })
    }))
  }

  ModalSubmit(id,status){//弹窗操作 status 1通过 2拒绝
    Modal.confirm({
      title: '确定要执行操作吗？',
      onOk:()=>{
        this.props.dispatch(Vattestation({"bigShotId":id,"bsAuditStatus":status},(respose) => {
          this.ModalCancel();
          message.success(respose.respMsg)
          this.selectList(this.currentNumber)
        }))
      },
      onCancel:()=>{

      },
    })
    
  }


  ModalCancel(){//弹窗关闭
    //关闭弹窗
    this.setState({
      ModalFlg: false,
    },()=>{
      this.setState({
        userList: "",
      })
    })
  }

  showBigImg(item,index){//点击查看大图
    //item 图片数组 index 点击的下标
    //单张图片
    var arry = [item];
    this.setState({
      showBigImgModal:true,
      imgArry:arry,
      imgIndex:index
    })
  }
  showBigImgModalCancel(){//关闭查看大图弹窗
    this.setState({
      showBigImgModal:false,
      imgArry:[],
      imgIndex:''
    })
  }

 
  
  columns() {//表格标题
    return [
      {
        title: '用户编码',
        dataIndex: 'bigShotCode',
        key: 'bigShotCode',
        width: '10%',
      },
      {
        title: '头像',
        dataIndex: 'headImage',
        key: 'headImage',
        width: '15%',
        render: (text, recordId, index) => <img 
          style={{width:"50px",cursor:"pointer"}} 
          title="点击查看大图" 
          onClick={this.showBigImg.bind(this,text ? text :  require('../../images/baseHeader.png'),0)} 
          src={text ? text : require('../../images/baseHeader.png')} 
        />,
      },
      {
        title: '姓名',
        dataIndex: 'realName',
        key: 'realName',
        width: '10%',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: '10%',
      },
      // {
      //   title: '认证用户',
      //   dataIndex: 'isAuth',
      //   key: 'isAuth',
      //   width: '10%',
      //   render: (text, recordId, index) => <span>{text?'是':'否'}</span>,
      // },
      {
        title: '报告数量',
        dataIndex: 'numberOfReports',
        key: 'numberOfReports',
        width: '15%',
      },
      {
        title: '状态',
        dataIndex: 'bsAuditStatus',
        key: 'bsAuditStatus',
        width: '10%',
        render: (text, recordId, index) => 
        <span>
          {text == 2 ?'已通过' :(text == 1 ? '待审核' : '已拒绝') }
        </span>,
      },
      {
        title: '操作',
        width: '20%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.selectInfo.bind(this,text.accountId)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>          
          <Button type="primary" size="small" onClick={this.addList.bind(this,2,text.accountId)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>          
          <Button type="primary" size="small" onClick={this.blankV.bind(this,text.bigShotId)} style={{marginRight:"5px",marginBottom:"5px"}}>拉黑</Button>          
          <Button type="primary" size="small" onClick={this.deleteV.bind(this,text.bigShotId)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>          
        </div>         
        ,
      },
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const accountList = this.state.list.respData ? this.state.list.respData :[];//刷新页面调用接口数据赋值
    const joinList = this.state.userList.respData ? this.state.userList.respData :{};
    const bigshot = this.state.userList.respData ? this.state.userList.respData.bigshot :{}
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="姓名">      
             {
                getFieldDecorator('realName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }                 
            </FormItem>
            <FormItem label="手机号">
             {
                getFieldDecorator('mobile', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }      
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addList.bind(this,1)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="bigShotId" 
            columns={this.columns()}//表格标题列
            dataSource={accountList.bigShotList}
            pagination={{showTotal:total => `共 ${total} 条数据`, total: accountList.count, current:this.currentNumber, pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}       
          />
        </Spin>
        {/*  详细信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.ModalFlg}
          title="认证操作"
          onCancel={this.ModalCancel.bind(this)}
          footer={
            bigshot.bsAuditStatus == 1?
            [<Button key="submit" type="primary"  onClick={this.ModalSubmit.bind(this,bigshot.bigShotId,2)}>通过</Button>,
            <Button key="cancel" type="primary"  onClick={this.ModalSubmit.bind(this,bigshot.bigShotId,3)}>拒绝</Button>]
            :
            (bigshot.bsAuditStatus == 2?
              [<Button key="cancel" type="primary"  onClick={this.ModalSubmit.bind(this,bigshot.bigShotId,3)}>拒绝</Button>]
              :
              [<Button key="submit" type="primary"  onClick={this.ModalSubmit.bind(this,bigshot.bigShotId,2)}>通过</Button>]
              
            )
          }
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">用户编号:</span><span className="content">{bigshot.bigShotCode}</span>
            </li>
            <li>
              <span className="title">姓名:</span><span className="content">{bigshot.realName}</span>
            </li>
            <li>
              <span className="title">公司:</span><span className="content">{bigshot.companyName}</span>
            </li>
            <li>
              <span className="title">职位:</span><span className="content">{bigshot.positionName}</span>
            </li>
            <li> 
              <span className="title">头像:</span>
              <span className="content">
                <img 
                  style={{width:"80px",cursor:"pointer"}} 
                  title="点击查看大图" 
                  onClick={this.showBigImg.bind(this,bigshot.headImage ? bigshot.headImage :  require('../../images/baseHeader.png'),0)}
                  src={bigshot.headImage ? bigshot.headImage : require('../../images/baseHeader.png')} 
                />
              </span>
            </li>
            <li>
              <span className="title">认证图片:</span>
              <span className="content">
                <img 
                  style={{width:"80px",cursor:"pointer"}} 
                  title="点击查看大图" 
                  onClick={this.showBigImg.bind(this,bigshot.certificateImage ? bigshot.certificateImage+global.$GLOBALCONFIG.imgRotate :  require('../../images/baseImg.png'),0)}
                  src={bigshot.certificateImage ? bigshot.certificateImage+global.$GLOBALCONFIG.imgRotate : require('../../images/baseImg.png')} 
                />
              </span>
            </li>
            {true?'':<li>
              <span className="title">认证状态:</span><span className="content">{bigshot.bsAuditStatus == 2?'已通过':(bigshot.bsAuditStatus == 1 ?'待审核':'已拒绝')}</span>
            </li>}
            <li>
              <span className="title">公司规模:</span><span className="content">{bigshot.enterpriseScale}</span>
            </li>
            <li>
              <span className="title">大咖能力:</span>
              <span className="content">
                {
                  (bigshot.professionalAblity ? bigshot.professionalAblity :[]).map((item,i)=>{
                      return(
                        <span key={i} style={{marginRight:"5px"}}>{item.value}</span>
                      )
                  })
                }
              </span>
            </li>
            <li>
              <span className="title">个人简介:</span><span className="content">{bigshot.introduce}</span>
            </li>
            <li>
              <span className="title">个人履历:</span>
              <div className="content" style={{maxHeight:"100px",overflow:"auto",}}>
                {
                  (bigshot.bigShotCvDTOList ? bigshot.bigShotCvDTOList :[]).map((item,i)=>{
                      return(
                        <p key={i} style={{marginBottom:"0"}}>
                          <span style={{marginRight:"5px"}}>{item.cvName}</span>
                          <span>{item.positionName}</span>                          
                        </p>
                      )
                  })
                }
              </div>
            </li>
            <li>
              <span className="title">注册时间:</span><span className="content">{bigshot.createTime}</span>
            </li>
            <li>
              <span className="title">手机号码:</span><span className="content">{bigshot.mobile}</span>
            </li>
            <li>
              <span className="title">帖子数量:</span><span className="content">{joinList.numberOfDynamic}</span>
            </li>
            <li>
              <span className="title">报告数量:</span><span className="content">{joinList.numberOfReports}</span>
            </li>
            <li>
              <span className="title">需求数量:</span><span className="content">{joinList.numberOfDemand}</span>
            </li>
            <li>
              <span className="title">最后登录时间:</span><span className="content">{joinList.lastLoginTime}</span>
            </li>
          </ul>
        </Modal>
        {/* 新增大咖弹窗 */}
        { 
          this.state.addModalFlg?
          <ModalAddMaster 
            type={this.state.addModalType}
            ModalFlg={this.state.addModalFlg} 
            ModalCancel={this.addListCancel.bind(this)} 
            callback={this.selectList.bind(this)}
            content={this.state.modalList.respData ? this.state.modalList.respData.bigshot : {}}
          />:''
        }
        {/* 查看大图的弹窗 */}
        {
          this.state.showBigImgModal?
          <ShowBigImg visible={this.state.showBigImgModal} imgArry={this.state.imgArry} imgIndex={this.state.imgIndex} closeModal={this.showBigImgModalCancel.bind(this)} />
          :""
        }
        
      </div>
    )
  }
}